
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-fasong"></i>
                    <div class="name">发送</div>
                    <div class="fontclass">.icon-fasong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche4"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daijinquan"></i>
                    <div class="name">代金券</div>
                    <div class="fontclass">.icon-daijinquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiang"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima3"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msnui-bookmark"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-msnui-bookmark</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduo"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-heart"></i>
                    <div class="name">heart</div>
                    <div class="fontclass">.icon-heart</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-heart2"></i>
                    <div class="name">heart2</div>
                    <div class="fontclass">.icon-heart2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qian"></i>
                    <div class="name">钱</div>
                    <div class="fontclass">.icon-qian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tucao"></i>
                    <div class="name">吐槽</div>
                    <div class="fontclass">.icon-tucao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwu"></i>
                    <div class="name">购物</div>
                    <div class="fontclass">.icon-gouwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinxitishi"></i>
                    <div class="name">信息提示-</div>
                    <div class="fontclass">.icon-xinxitishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiao1"></i>
                    <div class="name">分销</div>
                    <div class="fontclass">.icon-fenxiao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mp-user"></i>
                    <div class="name">个人中心</div>
                    <div class="fontclass">.icon-mp-user</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kongxin"></i>
                    <div class="name">空心</div>
                    <div class="fontclass">.icon-kongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-htmal5icon31"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-htmal5icon31</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-peixunyujiaoliu"></i>
                    <div class="name">培训与交流</div>
                    <div class="fontclass">.icon-peixunyujiaoliu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconindexsel"></i>
                    <div class="name">icon-indexsel</div>
                    <div class="fontclass">.icon-iconindexsel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconindexsel1"></i>
                    <div class="name">icon-indexsel1</div>
                    <div class="fontclass">.icon-iconindexsel1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjiatupian"></i>
                    <div class="name">添加图片</div>
                    <div class="fontclass">.icon-tianjiatupian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiguoqi"></i>
                    <div class="name">已过期</div>
                    <div class="fontclass">.icon-yiguoqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontjiantou3"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-iconfontjiantou3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quanbudingdan01"></i>
                    <div class="name">全部订单</div>
                    <div class="fontclass">.icon-quanbudingdan01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dizhi01"></i>
                    <div class="name">地址</div>
                    <div class="fontclass">.icon-dizhi01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-14bianji"></i>
                    <div class="name">14_编辑</div>
                    <div class="fontclass">.icon-14bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icontuihuoshouhou"></i>
                    <div class="name">icon_退货售后</div>
                    <div class="fontclass">.icon-icontuihuoshouhou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icondaifukuan"></i>
                    <div class="name">icon_待付款</div>
                    <div class="fontclass">.icon-icondaifukuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhuazixun"></i>
                    <div class="name">电话咨询</div>
                    <div class="fontclass">.icon-dianhuazixun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang1"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-shoucang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gerenzhongxindingdantuihuozhong"></i>
                    <div class="name">个人中心-订单-退货中</div>
                    <div class="fontclass">.icon-gerenzhongxindingdantuihuozhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenlei2"></i>
                    <div class="name">分类2</div>
                    <div class="fontclass">.icon-fenlei2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yongjin"></i>
                    <div class="name">佣金</div>
                    <div class="fontclass">.icon-yongjin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xihuancon"></i>
                    <div class="name">喜欢con</div>
                    <div class="fontclass">.icon-xihuancon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-geren2"></i>
                    <div class="name">个人 (2)</div>
                    <div class="fontclass">.icon-geren2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon"></i>
                    <div class="name">我的心愿单</div>
                    <div class="fontclass">.icon-icon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nopayment"></i>
                    <div class="name">待付款</div>
                    <div class="fontclass">.icon-nopayment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daishouhuo01"></i>
                    <div class="name">待收货-01</div>
                    <div class="fontclass">.icon-daishouhuo01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rightarrow"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-rightarrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qianbi101"></i>
                    <div class="name">钱币1-01</div>
                    <div class="fontclass">.icon-qianbi101</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenlei4"></i>
                    <div class="name">分类</div>
                    <div class="fontclass">.icon-fenlei4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fahuo"></i>
                    <div class="name">发货</div>
                    <div class="fontclass">.icon-fahuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiao203"></i>
                    <div class="name">分类</div>
                    <div class="fontclass">.icon-tubiao203</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dangdifill"></i>
                    <div class="name">dizhi3</div>
                    <div class="fontclass">.icon-dangdifill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xin"></i>
                    <div class="name">心</div>
                    <div class="fontclass">.icon-xin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyuan"></i>
                    <div class="name">会员</div>
                    <div class="fontclass">.icon-huiyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-more4"></i>
                    <div class="name">more</div>
                    <div class="fontclass">.icon-more4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youjiantou"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.icon-youjiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xihuan1"></i>
                    <div class="name">喜欢</div>
                    <div class="fontclass">.icon-xihuan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daifukuan"></i>
                    <div class="name">待付款</div>
                    <div class="fontclass">.icon-daifukuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang2"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-shoucang2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuandui"></i>
                    <div class="name">团队</div>
                    <div class="fontclass">.icon-tuandui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ios"></i>
                    <div class="name">ios</div>
                    <div class="fontclass">.icon-ios</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qianbao"></i>
                    <div class="name">钱包</div>
                    <div class="fontclass">.icon-qianbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyuan1"></i>
                    <div class="name">会员</div>
                    <div class="fontclass">.icon-huiyuan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dizhi"></i>
                    <div class="name">地址</div>
                    <div class="fontclass">.icon-dizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tel"></i>
                    <div class="name">tel</div>
                    <div class="fontclass">.icon-tel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconyg"></i>
                    <div class="name">组织管理</div>
                    <div class="fontclass">.icon-iconyg</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wode2"></i>
                    <div class="name">我的2</div>
                    <div class="fontclass">.icon-wode2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kongxin1"></i>
                    <div class="name">空心</div>
                    <div class="fontclass">.icon-kongxin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-address"></i>
                    <div class="name">地址</div>
                    <div class="fontclass">.icon-address</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ios1"></i>
                    <div class="name">iOS</div>
                    <div class="fontclass">.icon-ios1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daifahuo2"></i>
                    <div class="name">待发货</div>
                    <div class="fontclass">.icon-daifahuo2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhifuchenggong"></i>
                    <div class="name">支付成功</div>
                    <div class="fontclass">.icon-zhifuchenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home-copy"></i>
                    <div class="name">home</div>
                    <div class="fontclass">.icon-home-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daishouhuo"></i>
                    <div class="name">分期商城－待收货</div>
                    <div class="fontclass">.icon-daishouhuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoqing2"></i>
                    <div class="name">表情2</div>
                    <div class="fontclass">.icon-biaoqing2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qian2"></i>
                    <div class="name">钱</div>
                    <div class="fontclass">.icon-qian2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiansel"></i>
                    <div class="name">钱_sel</div>
                    <div class="fontclass">.icon-qiansel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caidanlangouwuche"></i>
                    <div class="name">菜单栏_购物车</div>
                    <div class="fontclass">.icon-caidanlangouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongsimingcheng"></i>
                    <div class="name">公司名称</div>
                    <div class="fontclass">.icon-gongsimingcheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixindenglu"></i>
                    <div class="name">微信登录</div>
                    <div class="fontclass">.icon-weixindenglu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixindenglufanbai"></i>
                    <div class="name">微信登录反白</div>
                    <div class="fontclass">.icon-weixindenglufanbai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quxiao"></i>
                    <div class="name">取消</div>
                    <div class="fontclass">.icon-quxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bj"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-bj</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-violet_collection-01"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-violet_collection-01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-team"></i>
                    <div class="name">team</div>
                    <div class="fontclass">.icon-team</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wode"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-wode</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenlei"></i>
                    <div class="name">分类</div>
                    <div class="fontclass">.icon-fenlei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-QR"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-QR</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanzhong"></i>
                    <div class="name">选中</div>
                    <div class="fontclass">.icon-xuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dizhi-01"></i>
                    <div class="name">地址</div>
                    <div class="fontclass">.icon-dizhi-01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaqian"></i>
                    <div class="name">价钱</div>
                    <div class="fontclass">.icon-jiaqian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pengyouquan"></i>
                    <div class="name">朋友圈</div>
                    <div class="fontclass">.icon-pengyouquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin1"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiguoqi1"></i>
                    <div class="name">已过期</div>
                    <div class="fontclass">.icon-yiguoqi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianji1"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-bianji1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tupian"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.icon-tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxitianchong"></i>
                    <div class="name">消息1填充</div>
                    <div class="fontclass">.icon-xiaoxitianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingxing_selected"></i>
                    <div class="name">星星_selected2</div>
                    <div class="fontclass">.icon-xingxing_selected</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wode1"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-wode1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziyuan"></i>
                    <div class="name">拨打电话</div>
                    <div class="fontclass">.icon-ziyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star"></i>
                    <div class="name">星星</div>
                    <div class="fontclass">.icon-star</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xihuan2"></i>
                    <div class="name">喜欢</div>
                    <div class="fontclass">.icon-xihuan2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xianshiqiang"></i>
                    <div class="name">限时抢</div>
                    <div class="fontclass">.icon-xianshiqiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chenggong"></i>
                    <div class="name">成功</div>
                    <div class="fontclass">.icon-chenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxi1"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-xiaoxi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shijian"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changjianwenti"></i>
                    <div class="name">常见问题</div>
                    <div class="fontclass">.icon-changjianwenti</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-left6"></i>
                    <div class="name">left</div>
                    <div class="fontclass">.icon-left6</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mianwubiaoqing-"></i>
                    <div class="name">面无表情-1</div>
                    <div class="fontclass">.icon-mianwubiaoqing-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhifubao"></i>
                    <div class="name">支付宝</div>
                    <div class="fontclass">.icon-zhifubao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star__easyico"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-star__easyico</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiang3"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-fenxiang3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xihuan3"></i>
                    <div class="name">喜欢2</div>
                    <div class="fontclass">.icon-xihuan3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zanting"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.icon-zanting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-buganxingqu"></i>
                    <div class="name">不感兴趣_44</div>
                    <div class="fontclass">.icon-buganxingqu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-buganxingqutianchong"></i>
                    <div class="name">不感兴趣(填充)_44</div>
                    <div class="fontclass">.icon-buganxingqutianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiguoqi-"></i>
                    <div class="name">已过期-01</div>
                    <div class="fontclass">.icon-yiguoqi-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuihuobaozhang"></i>
                    <div class="name">退货保障</div>
                    <div class="fontclass">.icon-tuihuobaozhang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianji"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anzhuo"></i>
                    <div class="name">安卓</div>
                    <div class="fontclass">.icon-anzhuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-money"></i>
                    <div class="name">money</div>
                    <div class="fontclass">.icon-money</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuandui1"></i>
                    <div class="name">团队</div>
                    <div class="fontclass">.icon-tuandui1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche1"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map"></i>
                    <div class="name">map</div>
                    <div class="fontclass">.icon-map</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tixian"></i>
                    <div class="name">提现</div>
                    <div class="fontclass">.icon-tixian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xihuan"></i>
                    <div class="name">喜欢</div>
                    <div class="fontclass">.icon-xihuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenlei1"></i>
                    <div class="name">分类</div>
                    <div class="fontclass">.icon-fenlei1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daishouhuo1"></i>
                    <div class="name">待收货</div>
                    <div class="fontclass">.icon-daishouhuo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang3"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-shoucang3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guoqi-"></i>
                    <div class="name">过期-126</div>
                    <div class="fontclass">.icon-guoqi-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxi"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-xiaoxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yijieshu"></i>
                    <div class="name">已结束</div>
                    <div class="fontclass">.icon-yijieshu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinhangzhong1"></i>
                    <div class="name">进行中</div>
                    <div class="fontclass">.icon-jinhangzhong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weikaishi"></i>
                    <div class="name">未开始</div>
                    <div class="fontclass">.icon-weikaishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianyi"></i>
                    <div class="name">吐槽建议</div>
                    <div class="fontclass">.icon-jianyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin2"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrowDown-copy-copy"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrowDown-copy-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiguoqi2"></i>
                    <div class="name">已过期</div>
                    <div class="fontclass">.icon-yiguoqi2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-right"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianxi"></i>
                    <div class="name">联系</div>
                    <div class="fontclass">.icon-lianxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tixian1"></i>
                    <div class="name">提现</div>
                    <div class="fontclass">.icon-tixian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiang2"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-fenxiang2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye1"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinxi"></i>
                    <div class="name">信息</div>
                    <div class="fontclass">.icon-xinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu1"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxi2"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-xiaoxi2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang4"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-shoucang4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chenggong1"></i>
                    <div class="name">成功</div>
                    <div class="fontclass">.icon-chenggong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changjianwenti1"></i>
                    <div class="name">常见问题</div>
                    <div class="fontclass">.icon-changjianwenti1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixinzhifu"></i>
                    <div class="name">微信支付</div>
                    <div class="fontclass">.icon-weixinzhifu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-erweima1"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-erweima1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wangzhanyunying"></i>
                    <div class="name">网站运营</div>
                    <div class="fontclass">.icon-wangzhanyunying</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiaolunkuo-"></i>
                    <div class="name">添加图片</div>
                    <div class="fontclass">.icon-tubiaolunkuo-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bofang1"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.icon-bofang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jia1"></i>
                    <div class="name">加</div>
                    <div class="fontclass">.icon-jia1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingxing"></i>
                    <div class="name">星星</div>
                    <div class="fontclass">.icon-xingxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdantijiaochenggong"></i>
                    <div class="name">订单提交成功</div>
                    <div class="fontclass">.icon-dingdantijiaochenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon--"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-icon--</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-map1"></i>
                    <div class="name">map</div>
                    <div class="fontclass">.icon-map1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon--jinbi"></i>
                    <div class="name">64-金币</div>
                    <div class="fontclass">.icon--jinbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou4"></i>
                    <div class="name">箭头 左 中</div>
                    <div class="fontclass">.icon-jiantou4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye-weixuanzhong"></i>
                    <div class="name">首页-未选中</div>
                    <div class="fontclass">.icon-shouye-weixuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxi3"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-xiaoxi3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xianshimiaosha"></i>
                    <div class="name">限时秒杀</div>
                    <div class="fontclass">.icon-xianshimiaosha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yiguoqi3"></i>
                    <div class="name">已过期</div>
                    <div class="fontclass">.icon-yiguoqi3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Shapecopy"></i>
                    <div class="name">购物，车</div>
                    <div class="fontclass">.icon-Shapecopy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changjianwenti2"></i>
                    <div class="name">常见问题</div>
                    <div class="fontclass">.icon-changjianwenti2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danxuanweixuanzhong"></i>
                    <div class="name">单选未选中</div>
                    <div class="fontclass">.icon-danxuanweixuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duiwu"></i>
                    <div class="name">队伍</div>
                    <div class="fontclass">.icon-duiwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changjianwenti3"></i>
                    <div class="name">常见问题</div>
                    <div class="fontclass">.icon-changjianwenti3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche2"></i>
                    <div class="name"> 购物车</div>
                    <div class="fontclass">.icon-gouwuche2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xihuan-tianchong"></i>
                    <div class="name">喜欢-填充</div>
                    <div class="fontclass">.icon-xihuan-tianchong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche3"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yaoqing"></i>
                    <div class="name">邀请</div>
                    <div class="fontclass">.icon-yaoqing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jia"></i>
                    <div class="name">加</div>
                    <div class="fontclass">.icon-jia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixuanzhongdanxuan"></i>
                    <div class="name">未选中单选</div>
                    <div class="fontclass">.icon-weixuanzhongdanxuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yizuofei"></i>
                    <div class="name">已作废</div>
                    <div class="fontclass">.icon-yizuofei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche11"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche11</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrowDown-copy-copy-copy"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrowDown-copy-copy-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianxi1"></i>
                    <div class="name">联系</div>
                    <div class="fontclass">.icon-lianxi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyuan2"></i>
                    <div class="name">会员</div>
                    <div class="fontclass">.icon-huiyuan2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-vip"></i>
                    <div class="name">vip</div>
                    <div class="fontclass">.icon-vip</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang5"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-shoucang5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yizuofei1"></i>
                    <div class="name">已作废</div>
                    <div class="fontclass">.icon-yizuofei1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianxiren"></i>
                    <div class="name">联系人</div>
                    <div class="fontclass">.icon-lianxiren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanzhong2-copy"></i>
                    <div class="name">选中</div>
                    <div class="fontclass">.icon-xuanzhong2-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanzhong2-copy-copy-copy"></i>
                    <div class="name">选中</div>
                    <div class="fontclass">.icon-xuanzhong2-copy-copy-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxi4"></i>
                    <div class="name">消息 (1)</div>
                    <div class="fontclass">.icon-xiaoxi4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche5"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-changjianwenti4"></i>
                    <div class="name">常见问题</div>
                    <div class="fontclass">.icon-changjianwenti4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daijinquan1"></i>
                    <div class="name">代金券</div>
                    <div class="fontclass">.icon-daijinquan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianxiren1"></i>
                    <div class="name">联系人</div>
                    <div class="fontclass">.icon-lianxiren1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianxi2"></i>
                    <div class="name">联系</div>
                    <div class="fontclass">.icon-lianxi2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongzhi-"></i>
                    <div class="name">通知</div>
                    <div class="fontclass">.icon-tongzhi-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongzhi"></i>
                    <div class="name">通知</div>
                    <div class="fontclass">.icon-tongzhi</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
